<template>
  <div>
    <el-input type="text" v-model="searchInputValue" style="width: 100%;"
    placeholder="按姓名搜索">
      <template #prefix>
        <el-icon class="el-input__icon"><search /></el-icon>
      </template>
    </el-input>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const emit = defineEmits(['do-search'])

// 搜索关键字
const searchInputValue = ref('');    

// 限流开关，为true时限制搜索
let throttle = false;

watch(searchInputValue, (newKeyword) => {
  if(newKeyword == '') {  // 搜索关键字为空时，不考虑限流
    throttle = false;
    emit('do-search', '')
  } else {
    if(!throttle) {       // 如果不限流，设置搜索关键字
      throttle = true;    // 开启限流
      emit('do-search', newKeyword)
      setTimeout(() => {  // 10000ms后取消限流
        throttle = false;
      }, 10000);
    }  
  }  
})
</script>